<template>
    <div class="containerBox">
        <el-button-group>
            <el-button type="primary" size="mini" @click="handleUndo">后退</el-button>
            <el-button type="success" size="mini" @click="handleRedo">前进</el-button>
            <el-button type="warning" size="mini" @click="handleDownload">下载</el-button>
<!--            <el-upload-->
<!--                    style="display: inline-block;"-->
<!--                    :file-list="fileList"-->
<!--                    class="upload-demo"-->
<!--                    action=""-->
<!--                    :auto-upload="false"-->
<!--                    :show-file-list="false"-->
<!--                    :http-request="httpRequest"-->
<!--                    :on-change="handleOnchangeFile"-->
<!--                    :on-remove="handleRemove"-->
<!--                    :before-remove="beforeRemove"-->
<!--            >-->
<!--                <el-button type="danger" size="mini">导入</el-button>-->
<!--            </el-upload>-->
        </el-button-group>


<!--        <el-button-group>-->

<!--            <el-button type="primary" @click="previewTemp">预览</el-button>-->
<!--            <el-button type="success" @click="handleZoom(1)">放大</el-button>-->
<!--            <el-button type="warning" @click="handleZoom(-1)">缩小</el-button>-->
<!--        </el-button-group>-->

<!--        <div class="chart-preview">-->
<!--            <div style="clear: both;"></div>-->
<!--            <div class="view-canvas">-->
<!--                <div id="container2"-->
<!--                     v-bind:style="{width: 100 * scale + '%',height: 100 * scale + '%'}"-->
<!--                ></div>-->
<!--            </div>-->
<!--        </div>-->
        <div id="container"></div>

        <div style="width: 300px;float: right;margin-top: -450px;margin-right: 100px;">
            <div v-if="processPanelShow">
                <el-row>
                    <h4>流程信息</h4>
                </el-row>
            </div>

            <div v-if="elementPanelShow">
                <el-row>
                    <h4>任务信息</h4>
                </el-row>
            </div>
            <el-row>
                <el-form :model="element" label-width="80px">
                    <el-form-item label="编号">
                        <el-input v-model="element.id" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="说明">
                        <el-input type="textarea" v-model="element.desc"></el-input>
                    </el-form-item>

                    <div v-if="elementPanelShow">
                        <el-form-item label="资源类型">
                            <el-select v-model="element.pathType">
                                <el-option value="组件" label="组件"></el-option>
                                <el-option value="网址" label="网址"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="资源路径">
                            <el-input v-model="element.path"></el-input>
                        </el-form-item>
                    </div>
                </el-form>
            </el-row>
        </div>
    </div>
</template>

<script>

    import BpmnModeler from 'bpmn-js/lib/Modeler';
    //import camundaExtension from '@/const/camunda.json';

    import customTranslate from '@/customTranslate/customTranslate';


    export default {
        name: "About",
        data() {
            return {
                containerEl: null,
                bpmnModeler: null,
                fileList: [],
                processPanelShow: true,
                elementPanelShow: false,
                element: {
                    id: "",
                    desc: "",
                    pathType: "组件",
                    path: ""
                }
            }
        },

        mounted() {

            let customTranslateModule = {
                translate: [ 'value', customTranslate ]
            };
            this.containerEl = document.getElementById('container');
            this.bpmnModeler = new BpmnModeler({
                container: this.containerEl,
                //moddleExtensions: {camunda: camundaExtension},
                additionalModules: [customTranslateModule]
            });
            //节点绑定事件
            const  that=this;
            this.bpmnModeler.on('element.click',function (e) {
                console.log("节点类型是:",e.element.type);
                console.log("节点ID是:",e.element.id);
                that.element.id=e.element.id;

                if(e.element.type=='bpmn:Task'){
                    that.elementPanelShow=true;
                    that.processPanelShow=false;
                }else{
                    that.elementPanelShow=false;
                    that.processPanelShow=true;
                }
            })

            this.create();
        },

        methods: {
            create() {
                this.bpmnModeler.createDiagram(() => {
                    this.bpmnModeler.get('canvas').zoom('fit-viewport');
                });
            },
            handleRemove(file) {
                for (let i = 0; i < this.fileList.length; i++) {
                    if (file.name === this.fileList[i].name) {
                        this.fileList.splice(i, 1);
                    }
                }
            },
            beforeRemove(file) {
                return this.$confirm(`确定移除 ${file.name}？`);
            },
            // 后退
            handleUndo() {
                this.bpmnModeler.get('commandStack').undo();
            },
            // 前进
            handleRedo() {
                this.bpmnModeler.get('commandStack').redo();
            },
            handleDownload() {
                this.bpmnModeler.saveXML({format: true}, (err, data) => {

                    console.log("err is:", err);
                    console.log("xml is:", data);
                    const dataTrack = 'bpmn';
                    const a = document.createElement('a');
                    const name = `diagram.${dataTrack}`;
                    a.setAttribute(
                        'href',
                        `data:application/bpmn20-xml;charset=UTF-8,${encodeURIComponent(data)}`
                    );
                    a.setAttribute('target', '_blank');
                    a.setAttribute('dataTrack', `diagram:download-${dataTrack}`);
                    a.setAttribute('download', name);
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                });
            },
            handleOnchangeFile(file) {
                const reader = new FileReader();
                let data = '';
                reader.readAsText(file.raw);
                reader.onload = (event) => {
                    data = event.target.result;
                    this.bpmnModeler.importXML(data, (err) => {
                        if (err) {
                            this.$message.info('导入失败');
                        } else {
                            this.$message.success('导入成功');
                        }
                    });
                };
            }
        }
    }
</script>


<style lang="scss">

    h1, h2 {
        font-weight: normal;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }

    .containerBox {
        height: calc(100vh - 220px);
        position: relative;

        #container {
            height: calc(100% - 50px);
        }
    }
</style>


